<script>
import { getProfile, modifyProfile } from '@/api/profile'
import CodeMirror from '@/components/JavascriptCodemirror/index.vue'

export default {
  name: 'Index',
  components: { CodeMirror },
  data() {
    return {
      // 用于三极路由
      isHidden: false,

      // 记忆数据结构表单
      form: {
        data: ''
      },
      // 记忆数据结构表单的校验规则
      rules: {
        data: [
          { required: true, message: this.$t('Memory_data_structure_rule'), trigger: 'blur' }
        ]
      },
      // 控制codemirror组件的显示
      codeVisible: false
    }
  },
  created() {
    // 添加权限校验逻辑
    if (!this.$store.getters.isAdmin()) {
      this.$message({
        type: 'error',
        message: '您没有权限访问此页面'
      })
      this.$router.push('/')
      return
    }
    this.getProfile()
  },
  methods: {
    // 提交记忆数据结构表单
    onSubmit() {
      const data = JSON.parse(this.form.data)
      if (this.checkProfile(data)) {
        const param = {
          data: data
        }
        // 修改记忆数据结构
        modifyProfile(param).then(() => {
          this.$message({
            message: this.$t('Modified_successfully'),
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            message: error.response.data.message,
            type: 'error'
          })
        })
      } else {
        this.$message({
          message: this.$t('profile_data_format_rule'),
          type: 'error'
        })
      }
    },
    // 获取记忆数据结构的值
    getProfile() {
      getProfile().then(response => {
        this.form.data = JSON.stringify(response, null, 2)
        this.codeVisible = true
      }).catch(error => {
        console.log(error)
        this.$message({
          message: this.$t('acquisition_failure'),
          type: 'error'
        })
      })
    },
    // 检查输入是否符合记忆数据结构的要求
    checkProfile(parsedData) {
      try {
        // 检查解析后的数据是否是一个数组
        if (!Array.isArray(parsedData)) {
          return false
        }
        // 遍历数组，检查每个元素是否都是一个对象，并且包含key和description这两个键
        for (const item of parsedData) {
          // eslint-disable-next-line no-prototype-builtins
          if (typeof item !== 'object' || item === null || !item.hasOwnProperty('key') || !item.hasOwnProperty('description')) {
            return false
          }
        }
        // 如果所有检查都通过，则返回true
        return true
      } catch (error) {
        console.log(error)
        return false
      }
    }
  }
}
</script>

<template>
  <div id="configuration-profile">
    <!-- Profile界面 -->
    <div :class="{ hidden: isHidden }">
      <div class="app-container">
        <div class="box">
          <!-- 记忆数据结构表单 -->
          <el-form ref="form" :rules="rules" :model="form" label-width="110px">
            <el-form-item :label="$t('memory_data_structure')" prop="data">
              <!--使用编辑json的插件-->
              <div v-if="codeVisible">
                <code-mirror v-model="form.data" />
                <!--<json-editor v-model="form.data" mode="code" :show-btns="false" lang="json" />-->
              </div>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="onSubmit">{{ $t('save') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div :class="{ hidden: !isHidden }">
      <router-view />
    </div>
  </div>
</template>

<style>
#configuration-profile .box {
  background-color: #fff;
  padding: 40px 20px 20px;
}
/*
#configuration-profile .jsoneditor-vue {
  width: 94%;
  height: 400px;
} */
</style>
